
<template>
  <f7-page>
    <f7-user-navbar
      :title="title"
      :back="false"
    >
      <f7-nav-left slot="nav-left">
        <f7-link
          icon-material="arrow_back"
          style="color:#3096ef"
          @click="doBack()"
        ></f7-link>
        {{title}}
      </f7-nav-left>

    </f7-user-navbar>

    <webview
      :id="mapp.appCode"
      src="../static/loading.html"
      ref="$webview"
      class="iframe-box"
      :preload="jsurl"
      nodeintegration
    ></webview>
  </f7-page>
</template>
<style>
.iframe-box {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}
</style>

<script>
import { async } from "q";
export default {
  data() {
    return {
      title: "加载中",
      mapp: null,
      jsurl: window.miniAppJsUrl,
      theme: "white"
    };
  },
  beforeMount: async function() {
    this.$f7.preloader.show();
    this.mapp = this.$framework.miniApp.findOption(this.$f7Route.query.key);
    let tmp = await this.$framework.db.settings.get("myTheme");
    this.theme = tmp.value;
  },
  mounted() {
    if (!this.mapp) {
      this.$f7.preloader.hide();
      this.$f7.dialog.alert("小程序配置不存在，请联系管理员", () => {
        this.toHomePage();
      });
    } else {
      const webview = this.$refs.$webview;
      webview.addEventListener("new-window", (event, url) => {
        console.log("打开窗口" + url);
        event.preventDefault();
        webview.clearHistory();
        let options = {
          extraHeaders:
            "mini-token: " +
            this.$framework.miniApp.getMiniToken(this.mapp.appCode) +
            "\n"
        };
        webview.loadURL(this.mapp.appLink, options);
        webview.addEventListener("dom-ready", () => {
          if (this.mapp.cssText) {
            webview.insertCSS(this.mapp.cssText);
          }
          // if (this.theme) {
          //   webview.executeJavaScript(
          //     "window.miniApp.switchSkin('" + this.theme.value + "')"
          //   );
          // }
          document
            .querySelector("webview")
            .executeJavaScript(
              "window.miniApp.switchSkin('" + this.theme + "')"
            );
          webview.openDevTools();
        });
        webview.addEventListener("did-finish-load", () => {
          this.$f7.preloader.hide();
          this.title = this.mapp.appName;
        });
      });
      webview.addEventListener("did-fail-load", () => {
        this.$f7.preloader.hide();
        this.$f7.dialog.alert("小程序加载失败，请稍后再试", () => {
          this.toHomePage();
        });
      });
      webview.addEventListener("did-navigate-in-page", () => {
        webview.executeJavaScript(
          "(function () {" + this.mapp.listenResourceJs + "})()",
          false,
          r => {
            this.title = this.mapp.appName + "-" + r;
          }
        );
      });
    }
  },
  methods: {
    doBack() {
      const webview = this.$refs.$webview;
      if (webview && webview.canGoBack()) {
        webview.goBack();
      } else {
        this.toHomePage();
      }
    },
    toHomePage() {
      this.$framework.redirect.home();
      if (
        this.$root &&
        this.$root.$children[0] &&
        this.$root.$children[0].$data
      ) {
        this.$root.$children[0].$data.activeIndex = 0;
      }
    }
  }
};
</script>
